<template>
  <div class="todo-container">
    <div class="todo-wrap" id="xxx">
      <!-- <input type="checkbox" :checked="todos[0].isDone" /> -->
      <Header :addTodo="addTodo"></Header>
      <!-- vue中的template标签,就相当于React中的Fragment.用来包裹结构但是不渲染任何元素 -->
      <template v-if="todos.length">
        <List
          :todos="todos"
          :updateTodo="updateTodo"
          :delTodo="delTodo"
          :setEditId="setEditId"
          :editId="editId"
          :editTodoName="editTodoName"
        ></List>
        <Footer
          :todos="todos"
          :allCheck="allCheck"
          :clearAllDone="clearAllDone"
        ></Footer>
      </template>
      <h1 v-else>暂无任务!</h1>
    </div>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
export default {
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos')) || [],
      editId: undefined,
    }
  },

  methods: {
    // 添加任务的函数
    addTodo(todoName) {
      // console.log(todoName)
      // 根据任务名创建任务对象
      const todo = {
        todoName,
        isDone: false,
        id: Date.now(),
      }
      this.todos.push(todo)
    },
    // 修改任务
    updateTodo(id) {
      // console.log(id)
      this.todos.forEach((item) => {
        if (item.id === id) item.isDone = !item.isDone
      })
      // console.log(this.todos)
    },
    // 删除一条任务
    delTodo(id) {
      if (confirm('你确定要删除吗?')) {
        this.todos = this.todos.filter((item) => item.id !== id)
      }
    },
    // 全选按钮-方式一和方式二对应的函数
    // allCheck(target) {
    //   // 遍历todos,将数组中所有数据的isDone改为target
    //   this.todos.forEach((item) => {
    //     item.isDone = target
    //   })
    // },
    // 方式三对应的函数
    allCheck() {
      // 自己去判断,当前的任务应该赋值为true,还是false
      // 1. 当所有任务中,只要有一个未完成,那么此时全选就是false,接下来要改成true
      // 2. 当所有任务中,都完成了,那么此时全选就是true,接下来改成false
      // 所以我们此时只需要知道当前所有任务是否都选中,如果都选中,则改成false,如果有一个未选中,则改成true
      // 如果所有的任务都选中了,则result为true,否则为false
      const result = this.todos.every((item) => item.isDone)
      // 遍历todos,将数组中所有数据的isDone改为target
      this.todos.forEach((item) => {
        item.isDone = !result
      })
    },

    // 删除已完成任务
    clearAllDone() {
      this.todos = this.todos.filter((item) => !item.isDone)
    },
    // 修改editId的函数
    setEditId(id) {
      // console.log(id)
      this.editId = id
    },

    //修改任务名的函数
    editTodoName(id, e) {
      // console.log(id, e)
      const todoName = e.target.value.trim()
      // 用户修改之后的数据为空,则直接return
      if (!todoName) return
      this.todos.forEach((item) => {
        if (item.id === id) {
          item.todoName = todoName
        }
      })
      // 让编辑文本框隐藏
      this.editId = undefined
    },
  },

  components: {
    Header,
    List,
    Footer,
  },
  updated() {
    // 理论上,vue的组件或vue的实例,当他们的数据发生变化,则vue实例或组件实例就应该更新.但是vue中自动实现了性能优化,他会让数据和对应的模板进行绑定,当数据发生变化的时候,使用这个数据的模板才会重新解析,也就意味着这个模板对应的组件更新了.否则,组件不更新
    // console.log('app更新了')
  },

  watch: {
    todos: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('todos', JSON.stringify(newValue))
      },
    },
  },
}
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
.btn-edit {
  color: #fff;
  background-color: skyblue;
  border: 1px solid skyblue;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
